import type { InputProps } from 'element-plus'
import { reactive, toRef, toRefs } from 'vue'

import { onlineApi } from '@/apis'
import {
  type GridExtOptions,
  TABLE_FORMAT,
  TABLE_ITEM_RENDER,
  TABLE_RENDERER,
  useGridExt
} from '@/hooks'
import { getElementFnFromInstance } from '@/utils'

export function useGrid() {
  const state = reactive({
    gridConfig: {
      showOverflow: true,
      border: true,
      loading: false,
      autoResize: true,
      height: 'auto',
      align: 'center',
      resizeConfig: {
        refreshDelay: 10
      },
      formConfig: {
        items: [
          {
            title: '用户名称',
            field: 'userName',
            itemRender: {
              name: TABLE_ITEM_RENDER.Input,
              props: {
                placeholder: '请输入'
              } as InputProps
            }
          },
          {
            itemRender: {
              name: TABLE_RENDERER.FormItemBtns
            }
          }
        ]
      },
      columns: [
        {
          type: 'seq',
          title: 'ID',
          width: 100
        },
        {
          field: 'tokenId',
          title: '会话编号'
        },
        {
          field: 'userName',
          title: '登录名称'
        },
        {
          field: 'deptName',
          title: '部门名称'
        },
        {
          field: 'loginIp',
          title: '主机'
        },
        {
          field: 'loginLocation',
          title: '登录地点'
        },
        {
          field: 'browser',
          title: '浏览器'
        },
        {
          field: 'os',
          title: '操作系统'
        },
        {
          field: 'loginDate',
          title: '登录时间',
          formatter: TABLE_FORMAT.Date
        },
        {
          title: '操作',
          width: 100,
          className: 'columns_operation',
          slots: {
            default: 'columns_operation'
          }
        }
      ],
      pagerConfig: {
        background: true,
        layouts: [
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'Sizes',
          'FullJump',
          'Total'
        ],
        pageSize: 15
      },
      proxyConfig: {
        seq: true,
        form: true,
        props: {
          result: 'list',
          total: 'total'
        },
        ajax: {
          query: async ({ form, page }) => {
            return await onlineApi.getOnlinePage({
              pageSize: page.pageSize,
              pageNum: page.currentPage,
              ...form
            })
          }
        }
      }
    } as GridExtOptions
  })

  const { gridRef, ...gridRestHook } = useGridExt(toRef(state, 'gridConfig'))
  const { $msgbox } = getElementFnFromInstance()

  /**
   * 下线
   */
  function handleOffline(id: string) {
    $msgbox
      .confirm('确认下线？', '提示', { type: 'warning' })
      .then(async () => {
        await onlineApi.offline(id)

        gridRestHook.refresh()
      })
      .catch(() => {})
  }

  return {
    ...toRefs(state),
    gridRef,
    handleOffline
  }
}
